<template>
  <div class="layout page-task">
    <Row>
      <Col span="24"><Button type="primary" icon="md-add" @click="onEdit('')">{{$t('page.base.taskadd')}}</Button></Col>
    </Row>
    <Divider />
    <Table :columns="columns" :data="task.list" border :loading="task.loading">
      <template slot-scope="{ row, index }" slot="action">
        <ButtonGroup>
          <Button type="primary" @click="onEdit(row.task)">{{$t('button.edit')}}</Button>
          <Button type="error" @click="onDel(row.task)">{{$t('button.delete')}}</Button>
        </ButtonGroup>
      </template>
    </Table>
    <TaskEdit ref="editor" @onRefresh="loadTask" />
  </div>
</template>

<script>
  import TaskEdit from './comp/taskedit'
  export default {
    components: { TaskEdit },
    data() {
      return {
        columns: [
          { renderHeader: (h, col) => { return h('span', this.$t('page.base.task')) }, key: 'task', width: 200 },
          { renderHeader: (h, col) => { return h('span', this.$t('page.base.ns')) }, key: 'namespace', width: 200 },
          { renderHeader: (h, col) => { return h('span', this.$t('form.remark')) }, key: 'remark' },
          { title: '', slot: 'action', width: 180, align: 'center' }
        ],
        task: {
          list: [],
          loading: true,
          editing: false,
          adding: false,
          form: {
            task: '',
            namespace: '',
            remark: ''
          },
        },
        rules: {
          task: [{ required: true, max: 16, pattern: /^[a-zA-Z][a-zA-Z0-9_]{1,16}/, message: this.$t('page.base.taskform.namerule'), trigger: 'blur' }],
          remark: [{ required: true, max: 64, message: this.$t('form.inputrule', [this.$t('form.remark')]), trigger: 'blur' }],
        },
      }
    },
    mounted() {
      this.loadTask()
    },
    methods: {
      loadTask() {
        this.task.loading = true
        this.$md.dispatch('task_list').then(data => {
          if (data.retCode === 1) {
            let tasks = data.data || []
            let allNs = this.$t('page.base.nsall')
            for (let i in tasks) {
              tasks[i].namespace = tasks[i].namespace || allNs
            }
            this.task.list = tasks
          }
          this.task.loading = false
        })
      },
      onEdit(name) {
        let task
        if (name) task = this.$collect.findByProp(this.task.list, 'task', name)
        this.$refs.editor.show(task)
      },
      onDel(name) {
        this.$Modal.confirm({
          title: this.$t('delmodel.title'),
          content: this.$t('delmodel.content'),
          onOk: () => {
            let task = this.$collect.findByProp(this.task.list, 'task', name)
            this.$md.dispatch('task_del', {
              data: {
                task: name,
                namespace: task.namespace,
              }
            }).then(data => {
              if (data.retCode === 1) {
                this.$Message.success(this.$t('submitok'))
                this.loadTask()
              }
            })
          }
        })
      },
    }
  };
</script>
